<template>
    <view class='head'>
        <view class="vip">
			<button open-type="share">
				<view class="vip_item">
					<image class="image radius" src="http://fsl-test.dderp.cn:33548/adh-mini/index/ye.png" style="opacity: 1;"
					    alt="">
					</image>
				   <view class="item_img">
				        <image src="http://fsl-test.dderp.cn:33548/adh-mini/index/idh.png" mode=""></image>
				    </view>
				    <view class="item_name">
				        邀请好友成为协议商
				    </view>
				    <view class="item_vip">
				    </view>
				    <view class="image2">
				        <image src="http://fsl-test.dderp.cn:33548/adh-mini/index/vip.png" mode=""></image>
				    </view>
				</view>
			</button>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { onLaunch, onShow,onShareAppMessage, onLoad } from '@dcloudio/uni-app'
const state = ref({
	item:'',
	agent_code:''
})
// 分享
onShareAppMessage((res) => {
	var obj = {
		...state.value.item,
		user_name: state.value.agent_code.XM
	}
	return {
		title:`${state.value.agent_code.XM}邀请你进入${state.value.agent_code.AGENT}拿货，价格优惠多多`,
		path: `/pages/login/login?item=${JSON.stringify(obj)}`,
		imageUrl: 'http://fsl-test.dderp.cn:33548/adh-mini/logo.png'
	}
})
onLoad(()=>{
	state.value.item = uni.getStorageSync('this')
	state.value.agent_code = uni.getStorageSync('session')
	console.log(state.value.agent_code);
})
const toPage = () => {
    // uni.navigateTo({
    //     url: '/pages/agreement/index'
    // })
}
</script>
<style scoped lang="scss">
.vip {
	width: 100%;
    margin-top: 20rpx;
	.image{
		width: 100%;
		height: 150rpx;
	}
	button{
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
		line-height: normal;
		padding: 0 !important;
		border-radius: 20rpx !important;
		.vip_item{
			width: 100%;
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			.image{
				width: 100%;
				height: 150rpx;
				position: absolute;
				top: 0;
				right: 0;
				
				z-index: -1;
			}
			.item_img{
				flex: 2;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			.item_name{
				text-align: left;
				flex: 6;
				color: #fff;
				opacity: 0.9;
			}
			.image2{
				flex: 2;
				image{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}
				
			}
		}
	}
    // .image {
    //     width: 100%;
    //     height: calc(366rpx / 2.5);
    // }

    // .vip_item {
    //     position: absolute;
    //     top: 0;
    //     height: calc(366rpx / 2.5);
    //     display: flex;
    //     align-items: center;
    //     padding: 0 10rpx 0 20rpx;

    //     .item_img {
    //         image {
    //             border-radius: 100rpx;
    //             width: 100rpx;
    //             height: 100rpx;
    //         }
    //     }

    //     .item_name {
    //         padding: 0 20rpx;
    //         color: #fff;
    //     }

    //     .item_vip {
    //         image {
    //             width: 30rpx;
    //             height: 30rpx;
    //         }
    //     }
    // }

    // .image2 {
    //     image {
    //         float: right;
    //         margin-right: -220rpx;
    //         width: 60rpx;
    //         height: 60rpx;
    //     }
    // }
}
</style>